<template>
    <div class="progress-box">
        <img src="../../../assets/loading.gif" class="loading" v-show="loading">
        <div class="params-box">
            <el-form :model="paramsForm" label-width="auto">
                <el-form-item label="年份:" size="small">
                    <el-config-provider>
                        <el-select v-model="paramsForm.jcYear" placeholder="请选择年份" size="small" style="width: 80px"
                            @visible-change="getYears">
                            <el-option v-for="item in yearsArr" :label="item" :value="item" :key="item" />
                        </el-select>
                    </el-config-provider>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" size="small" @click="getJcDatas(paramsForm)"
                    :loading = "loading">查询</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="frm-box" v-show="dataShow">
            <div class="left-box">
                <div class="left-up-box">
                    <div class="left-up-box-one">
                        <Decoration9  class="charts">整体{{ overAll }}%</Decoration9>

                    </div>
                    <div class="left-up-box-two" ref="lineProgressRef"></div>
                    <div class="left-up-box-three">
                        <BorderBox1>
                            <div class="charts" ref="PgProgressRef"></div>
                        </BorderBox1>
                    </div>
                </div>
                <div class="left-middle-box" ref="monthProgressRef"></div>
                <div class="left-down-box" ref="subDateRef"></div>
            </div>
            <div class="right-box">
                <div class="right-up-box">
                    <BorderBox1>
                        <div class="charts" ref="locProgressRef"></div>
                    </BorderBox1>
                </div>
                <div class="right-down-box">
                    <BorderBox1>
                        <div class="charts" ref="subProgressRef"></div>
                    </BorderBox1>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue'
import axios from '@/utils/request'
// import { BorderBox9 } from '@dataview/datav-vue3' 
import { BorderBox1, Decoration9 } from '@kjgl77/datav-vue3'
import * as echarts from 'echarts';


let yearsArr = ref([]) //年份
let pg = ref("") // 班组
let station = ref("") // 地点
let sub = ref("") // 子系统

// 查询表单
let paramsForm = reactive({
    jcYear: new Date().getFullYear(),
})

//年份获取
const getYears = () => {
    let fullYear = new Date().getFullYear() + 2
    let arr = []
    for (let i = 2020; i <= fullYear; i++) {
        arr.push(i)
    }
    yearsArr.value = arr
}

let dataShow = ref(false) // 大屏展示
let loading = ref(false) // 加载
let overAll = ref(0) // 整体

let overAllRef = ref(null)
// console.log(overAllRef.value)

//线路进度
//#region 
/****************************************************************************************************************************************** */
// 获取 DOM 元素的引用（用于初始化图表）
let lineProgressRef = ref(null) // 线路进度 柱形图
// 存储 ECharts 实例
let lineChartInstance = null
//柱形图配置-线路进度
let lineProgressConfig = reactive({
    title: {
        text: '线路进度', // 图表标题
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 14 // 标题字体大小
        },
        left: '20', // 标题水平居中
        top: '10' // 标题垂直居中
    },
    grid: {
        // top: '20%', // 调整图表距离顶部的距离
        bottom: '10%', // 调整图表距离底部的距离
        // left: '10%', // 调整图表距离左侧的距离
        // right: '10%', // 调整图表距离右侧的距离
    },
    tooltip: {}, // 默认提示框配置
    //   legend: {
    //     data: ['销量'] // 图例名称
    //   },
    xAxis: {
        type: 'category', // X 轴类型为类目轴
        show: false, // 不显示 X 轴
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // X 轴数据
        // axisLine: {
        //     show: false // 不显示 X 轴轴线
        // },
        // offset: 10, // 偏移量
    },
    yAxis: {
        show: false, // 不显示 Y 轴
        splitLine: {
            show: false // 不显示分割线
        }
    }, // Y 轴默认配置
    series: [
        {
            name: '销量', // 系列名称
            type: 'bar', // 图表类型为柱状图
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小
                formatter: '{c}%' // 标签内容格式
            },
            data: [5, 20, 36, 10, 10, 20], // 数据值
        }
    ]
})

//班组进度
let PgProgressRef = ref(null) // 班组进度 条形图
// 存储 ECharts 实例
let PgChartInstance = null
//柱形图配置-线路进度
let PgProgressConfig = reactive({
    title: {
        text: '班组进度', // 图表标题
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 14 // 标题字体大小
        },
        left: '20', // 标题水平居中
        top: '10' // 标题垂直居中
    },
    grid: {
        top: '6%', // 调整图表距离顶部的距离
        bottom: '5%', // 调整图表距离底部的距离
        // left: '35%', // 调整图表距离左侧的距离
        // right: '10%', // 调整图表距离右侧的距离
    },
    tooltip: {}, // 默认提示框配置
    //   legend: {
    //     data: ['销量'] // 图例名称
    //   },
    xAxis: {
        type: 'value', // X 轴类型为值轴        
        show: false, // 不显示 X 轴
        //     // 可选：x轴标签格式化（如显示短名称）
        // axisLabel: {
        //     formatter: (name) => name.substring(11, 20) // 示例：显示前2个字符
        // }
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // X 轴数据
        // axisLine: {
        //     show: false // 不显示 X 轴轴线
        // },
        // offset: 10, // 偏移量
    },
    yAxis: {
        type: 'category', // Y 轴类型为类目轴
        show: false, // 不显示 Y 轴
    }, // Y 轴默认配置
    series: [
        {
            name: '销量', // 系列名称
            type: 'bar', // 图表类型为柱状图
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小
                formatter: '{c}%' // 标签内容格式
            },
            data: [5, 20, 36, 10, 10, 20], // 数据值
        }
    ]
})

//各月工作量
let monthProgressRef = ref(null) // 各月工作量 折线图
// 存储 ECharts 实例
let monthChartInstance = null
//折线图配置-线路各月工作量
let monthProgressConfig = reactive({
    title: {
        text: '各月工作量', // 图表标题
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 14 // 标题字体大小
        },
        left: '20', // 标题水平居中
        top: '10' // 标题垂直居中
    },
    grid: {
        // top: '20%', // 调整图表距离顶部的距离
        bottom: '10%', // 调整图表距离底部的距离
        left: '5%', // 调整图表距离左侧的距离
        right: '5%', // 调整图表距离右侧的距离
    },
    tooltip: {}, // 默认提示框配置
    legend: {
        data: ['销量'], // 图例名称
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 12 // 标题字体大小
        }
    },
    xAxis: {
        type: 'category', // X 轴类型为类目轴
        boundaryGap: false,
        // show: false, // 不显示 X 轴
        // data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'], // X 轴数据
        // axisLine: {
        //     show: false // 不显示 X 轴轴线
        // },
        // offset: 10, // 偏移量
    },
    yAxis: {
        type: 'value', // Y 轴类型为值轴
        // show: false, // 不显示 Y 轴
        // splitLine: {
        //     show: false // 不显示分割线
        // }
    }, // Y 轴默认配置
    series: [
        {
            name: '销量', // 系列名称
            type: 'line', // 图表类型为折线图   
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小
                formatter: '{c}' // 标签内容格式
            },
            data: [5, 20, 36, 10, 10, 20], // 数据值
        }
    ]
})

//点击班组联动-归属站点进度
let locProgressRef = ref(null) // 各月工作量 条形图
// 存储 ECharts 实例
let locChartInstance = null
//柱形图配置-线路进度
let locProgressConfig = reactive({
    title: {
        text: '各站点进度', // 图表标题
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 14 // 标题字体大小
        },
        left: '10', // 标题水平居中
        top: '10' // 标题垂直居中
    },
    grid: {
        top: '6%', // 调整图表距离顶部的距离
        bottom: '5%', // 调整图表距离底部的距离
        // left: '35%', // 调整图表距离左侧的距离
        // right: '10%', // 调整图表距离右侧的距离
        containLabel: true
    },
    legend: {
        // data: [], // 图例名称
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 12 // 标题字体大小
        },
        right: '5%', // 调整图例距离顶部的距离
        top: '5%',
    },
    tooltip: {}, // 默认提示框配置
    xAxis: [{
        name: '数量',
        type: 'value', // X 轴类型为值轴        
        show: false, // 不显示 X 轴
    }, {
        name: '百分比',
        type: 'value', // X 轴类型为值轴        
        show: false, // 不显示 X 轴
        max: 100,//最大值
        axisLabel: {
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: '{value}%',
        }
    }],
    yAxis: [{
        type: 'category', // Y 轴类型为类目轴
        show: true, // 不显示 Y 轴
        axisLabel: {
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: (value) => `${value.substr(7)}`,
        },
        axisLine: {
            show: false // 不显示分割线
        },
        axisTick: {
            show: false // 不显示刻度线
        },
        data: []
    }, {
        type: 'category', // Y 轴类型为类目轴
        show: true, // 不显示 Y 轴
        axisLabel: {
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: (value) => `${value}`,
        },
        axisLine: {
            show: false // 不显示分割线
        },
        axisTick: {
            show: false // 不显示刻度线
        },
        data: []
    }], // Y 轴默认配置
    series: [
        {
            name: '', // 系列名称
            type: 'bar', // 图表类型为柱状图
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小
                formatter: '{c}%' // 标签内容格式
            },
            data: [], // 数据值
        }
    ]
})

//点击子系统联动-归属站点进度
let subProgressRef = ref(null) // 各月工作量 条形图
// 存储 ECharts 实例
let subChartInstance = null
//柱形图配置-线路进度
let subProgressConfig = reactive({
    title: {
        text: '各子系统进度', // 图表标题
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 14 // 标题字体大小
        },
        left: '10', // 标题水平居中
        top: '10' // 标题垂直居中
    },
    grid: {
        top: '6%', // 调整图表距离顶部的距离
        bottom: '5%', // 调整图表距离底部的距离
        // left: '35%', // 调整图表距离左侧的距离
        // right: '10%', // 调整图表距离右侧的距离
        containLabel: true
    },
    legend: {
        // data: [], // 图例名称
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 12 // 标题字体大小
        },
        right: '5%', // 调整图例距离顶部的距离
        top: '5%',
    },
    tooltip: {}, // 默认提示框配置
    xAxis: [{
        name: '数量',
        type: 'value', // X 轴类型为值轴        
        show: false, // 不显示 X 轴
    }, {
        name: '百分比',
        type: 'value', // X 轴类型为值轴        
        show: false, // 不显示 X 轴
        max: 100,//最大值
        axisLabel: {
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: '{value}%',
        }
    }],
    yAxis: [{
        type: 'category', // Y 轴类型为类目轴
        show: true, // 不显示 Y 轴
        axisLabel: {
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: (value) => `${value.substr(7)}`,
        },
        axisLine: {
            show: false // 不显示分割线
        },
        axisTick: {
            show: false // 不显示刻度线
        },
        data: []
    }, {
        type: 'category', // Y 轴类型为类目轴
        show: true, // 不显示 Y 轴
        axisLabel: {
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: (value) => `${value}`,
        },
        axisLine: {
            show: false // 不显示分割线
        },
        axisTick: {
            show: false // 不显示刻度线
        },
        data: []
    }], // Y 轴默认配置
    series: [
        {
            name: '', // 系列名称
            type: 'bar', // 图表类型为柱状图
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小
                formatter: '{c}%' // 标签内容格式
            },
            data: [], // 数据值
        }
    ]
})

// 子系统完成日期分布
let subDateRef = ref(null) // 工作量日期分布 柱形图
// 存储 ECharts 实例
let subDateChartInstance = null
//柱形图配置-线路进度
let subDateConfig = reactive({
    title: {
        text: '子系统完成日期分布', // 图表标题
        textStyle: {
            color: '#fff', // 标题颜色
            fontSize: 14 // 标题字体大小
        },
        left: '20', // 标题水平居中
        top: '10' // 标题垂直居中
    },
    grid: {
        // top: '20%', // 调整图表距离顶部的距离
        bottom: '20%', // 调整图表距离底部的距离
        // left: '10%', // 调整图表距离左侧的距离
        // right: '10%', // 调整图表距离右侧的距离
    },
    tooltip: {}, // 默认提示框配置
    //   legend: {
    //     data: ['销量'] // 图例名称
    //   },
    xAxis: {
        type: 'category', // X 轴类型为类目轴
        show: true, // 不显示 X 轴
        axisLabel: {
            rotate: 45, // 旋转角度
            color: '#fff', // 标题颜色
            fontSize: 12,// 标题字体大小
            formatter: (value) => `${value.substr(2, 8)}`,
        }
    },
    yAxis: {
        show: false, // 不显示 Y 轴
        splitLine: {
            show: false // 不显示分割线
        }
    }, // Y 轴默认配置
    series: [
        {
            name: '日期', // 系列名称
            type: 'bar', // 图表类型为柱状图
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小   
                formatter: `{a}\n{c}%` // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
            },
            data: [], // 数据值
        }
    ]
})


/**************************************************************************************************************************************** */
//#endregion

// 初始化图表的方法
const initChartOfLineProgress = () => {
    if (lineProgressRef.value) {
        // 初始化 echarts 实例
        lineChartInstance = echarts.init(lineProgressRef.value)
        // 使用配置项渲染图表
        lineChartInstance.setOption(lineProgressConfig)
    }
    if (PgProgressRef.value) {
        // 初始化 echarts 实例
        PgChartInstance = echarts.init(PgProgressRef.value)
        // 使用配置项渲染图表
        PgChartInstance.setOption(PgProgressConfig)
    }
    if (monthProgressRef.value) {
        // 初始化 echarts 实例
        monthChartInstance = echarts.init(monthProgressRef.value)
        // 使用配置项渲染图表
        monthChartInstance.setOption(monthProgressConfig)
    }
    if (locProgressRef.value) {
        // 初始化 echarts 实例
        locChartInstance = echarts.init(locProgressRef.value)
        // 使用配置项渲染图表
        locChartInstance.setOption(locProgressConfig)
    }
    if (subProgressRef.value) {
        // 初始化 echarts 实例
        subChartInstance = echarts.init(subProgressRef.value)
        // 使用配置项渲染图表
        subChartInstance.setOption(subProgressConfig)
    }
    if (subDateRef.value) {
        // 初始化 echarts 实例
        subDateChartInstance = echarts.init(subDateRef.value)
        // 使用配置项渲染图表
        subDateChartInstance.setOption(subDateConfig)
    }
}

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
    overAllRef.value?.resize()
    lineChartInstance?.resize()
    PgChartInstance?.resize()
    monthChartInstance?.resize()
    locChartInstance?.resize()
    subChartInstance?.resize()
    subDateChartInstance?.resize()
}

/**
 * 获取检测进度
 * @param paramsForm 查询表单
 */
const getJcDatas = async (paramsForm) => {
    // console.log(paramsForm)
    loading.value = true
    let jcProgressInfo = await axios.post('/index/jcdata/jcProgress/getJcProgressInfo', { paramsForm })
    // console.log(jcProgressInfo)
    loading.value = false
    if (jcProgressInfo.status) {
        dataShow.value = true
        // 整体进度
        overAll.value = jcProgressInfo.datas.overAllRes[0].WCL
        // 线路进度
        lineProgressConfig.xAxis.data = jcProgressInfo.datas.lineProgressRes.map(item => item.LINENUM)
        lineProgressConfig.series = [{
            name: jcProgressInfo.datas.lineProgressRes.map(item => item.LINENUM), // 系列名称
            type: 'pictorialBar', // 类型为象形柱
            symbol: 'circle', // 图形为
            symbolPosition: 'end', // 图形位置
            symbolSize: [49, 10], // 图形大小
            symbolOffset: ['47%', '-50%'], // 图形偏移
            // symbolRotate: 90, // 图形旋转角度
            itemStyle: { // 图形样式
                color: 'rgba(41,121,255,1)', // 颜色
                borderColor: 'rgba(3, 138, 255,1)', // 边框颜色
                borderWidth: 1, // 边框宽度
                shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                shadowBlur: 20, // 阴影模糊度
                shadowOffsetX: 2, // 阴影水平偏移
                shadowOffsetY: -5 // 阴影垂直偏移
            },
            label: { // 标签配置
                show: true, // 显示标签
                position: 'top', // 标签位置
                color: '#fff', // 标签颜色
                fontSize: 12, // 标签字体大小
                formatter: `{c}%` // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
            },
            zlevel: 10, // 图形层级
            // barWidth: '20', // 柱子宽度
            barGap: 0, // 柱子之间的间距
            data: jcProgressInfo.datas.lineProgressRes.map(item => item.WCL), // 数据值
            tooltip: { // 提示框配置
                show: true, // 显示提示框
                formatter: `{b}:{c}%` // 提示框内容格式
            }
        }, {
            tooltip: {
                formatter: `{b}:{c}%`
            }, // 提示框配置
            name: jcProgressInfo.datas.lineProgressRes.map(item => item.LINENUM), // 系列名称
            type: 'bar', // 图表类型为柱状图
            barWidth: '50', // 柱子宽度
            data: jcProgressInfo.datas.lineProgressRes.map(item => item.WCL), // 数据值
            // label: { // 标签配置
            //     show: true, // 显示标签
            //     position: 'top', // 标签位置
            //     color: '#fff', // 标签颜色
            //     fontSize: 12, // 标签字体大小
            //     formatter: `{a}\n{c}%` // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
            // },
            // showBackground: true, // 显示背景
            // backgroundStyle: { // 背景样式
            //     color: 'rgba(180, 180, 180, 0.2)', // 背景颜色
            // },
            itemStyle: { // 柱子样式
                // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                //     offset: 0,
                //     color: 'rgba(3, 138, 255, .9)' // 渐变色的开始颜色
                // }, {
                //     offset: 1,
                //     color: 'rgba(147, 250, 165, .6)' // 渐变色的结束颜色
                // }]), // 柱子颜色
                // borderRadius: [3, 3, 0, 0], // 圆角
                // normal: {
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0, // 渐变的起始点 x 坐标
                        y: 0, // 渐变的起始点 y 坐标
                        x2: 0, // 渐变的结束点 x 坐标
                        y2: 1, // 渐变的结束点 y 坐标
                        colorStops: [ // 渐变的颜色
                            { offset: 0, color: 'rgba(3, 138, 255,1)' }, // 起始颜色
                            { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                        ],
                    },
                    borderRadius: [3, 3, 0, 0], // 圆角
                    shadowBlur: 15, // 阴影模糊度
                    shadowOffsetX: 2, // 阴影水平偏移
                    shadowOffsetY: -5 // 阴影垂直偏移
                // },

            }
        }, {
            name: jcProgressInfo.datas.lineProgressRes.map(item => item.LINENUM), // 系列名称
            type: 'pictorialBar', // 类型为象形柱
            symbol: 'circle', // 图形为
            symbolPosition: 'start', // 图形位置
            symbolSize: [49, 10], // 图形大小
            symbolOffset: ['-47%', 0], // 图形偏移
            // symbolRotate: 90, // 图形旋转角度
            itemStyle: { // 图形样式
                color: 'rgba(118,255,3,.1)', // 颜色
                borderColor: 'rgba(118,255,3,0.5)', // 边框颜色
                borderWidth: 1, // 边框宽度
                shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                shadowBlur: 15, // 阴影模糊度
                shadowOffsetX: 2, // 阴影水平偏移
                shadowOffsetY: -5 // 阴影垂直偏移
            },
            zlevel: 10, // 图形层级
            // barWidth: '20', // 柱子宽度
            barGap: 0, // 柱子之间的间距
            data: jcProgressInfo.datas.lineProgressRes.map(item => item.WCL), // 数据值
        }]
        lineChartInstance.setOption(lineProgressConfig)

        // 班组进度
        // PgProgressConfig.yAxis.data = jcProgressInfo.datas.PgProgressRes.map(item => item.PGNAME.substr(11))   
        PgProgressConfig.series = jcProgressInfo.datas.PgProgressRes.map(item => {
            return {
                tooltip: {
                    // formatter: `{a}:{c}%`,
                    // // position: ['50%', '50%'], // 提示框位置-居中
                    formatter: (params) => {
                        return `${params.seriesName.substr(11)}:${params.data}%`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: item.PGNAME,
                type: 'bar', // 图表类型为柱状图
                // barWidth: '20', // 柱子宽度，不设置则自适应
                data: [item.WCL], // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'left', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    // formatter: `{a}:{c}%`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    formatter: (params) => `${params.seriesName.substr(11)}:${params.data}%`,
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                // showBackground: true, // 显示背景
                // backgroundStyle: { // 背景样式
                //     color: 'rgba(180, 180, 180, 0.2)', // 背景颜色
                // },
                itemStyle: { // 柱子样式
                    // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    //     offset: 0,
                    //     color: 'rgba(3, 138, 255,.9)' // 渐变色的开始颜色
                    // }, {
                    //     offset: 1,
                    //     color: 'rgba(147, 250, 165,.6)' // 渐变色的结束颜色
                    // }]), // 柱子颜色 
                    // borderRadius: [3, 3, 0, 0], // 圆角
                    normal: {
                        color: {
                            type: 'linear', // 线性渐变
                            x: 1, // 渐变的起始点 x 坐标
                            y: 1, // 渐变的起始点 y 坐标
                            x2: 0, // 渐变的结束点 x 坐标   
                            y2: 0, // 渐变的结束点 y 坐标
                            colorStops: [ // 渐变的颜色
                                { offset: 0, color: 'rgba(3, 138, 255,1)' }, // 起始颜色
                                { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                            ],
                        },
                        borderRadius: [0, 3, 3, 0], // 圆角
                    }
                }
            }
        })
        PgChartInstance.setOption(PgProgressConfig)

        // 各月工作量-多系列折线图
        let lines = ref([]) // 存储不同线路分类数据
        let ymArr = [] // 年月数组
        // 遍历数据，提取年月
        jcProgressInfo.datas.monthProgressRes.forEach(item => {
            if (!ymArr.includes(item.YM)) {
                ymArr.push(item.YM) // 只添加不重复的年月
            }
        })
        //分类数据
        monthProgressConfig.xAxis.data = ymArr
        //lines添加父级
        jcProgressInfo.datas.monthProgressRes.forEach(item => {
            let linesInfo = {
                name: "",
                child: []
            }
            if (!lines.value.some(_ => _.name === item.LINENUM)) {
                linesInfo.name = item.LINENUM
                lines.value.push(linesInfo) // 将不同线路的名称添加到数组中
            }
        })
        //lines添加子级（子级为ymArr）   
        jcProgressInfo.datas.monthProgressRes.forEach(item => {
            let ymInfo = {
                name: "", // 年月
                value: 0 // 数值
            }
            if (lines.value.some(_ => _.name === item.LINENUM)) {
                ymInfo.name = item.YM
                ymInfo.value = item.CX
                lines.value.find(_ => _.name === item.LINENUM).child.push(ymInfo)
            }
        })
        // console.log(lines)
        //系列图例
        monthProgressConfig.legend.data = lines.value.map(item => item.name)
        //系列
        monthProgressConfig.series = lines.value.map(item => {
            // console.log(monthProgressConfig.xAxis.data)
            let newValue = [] //存储系列的data值
            for (let i = 0; i < monthProgressConfig.xAxis.data.length; i++) {
                //获取与分类相同年月的数值-如果没有则为0，均加入数组
                let item2 = item.child.find(_ => _.name === monthProgressConfig.xAxis.data[i])
                if (item2) {
                    newValue.push(item2.value)
                } else {
                    newValue.push(0)
                }
            }
            return {
                tooltip: {
                    formatter: `{a}_{b}:{c}`,
                    // position: ['50%', '50%'], // 提示框位置-居中
                }, // 提示框配置
                name: item.name, // 系列名称
                type: 'line', // 图表类型为折线图
                smooth: true,
                lineStyle: {
                    width: 0
                },
                // showSymbol: false, // 是否显示数据点
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#18ffff'
                        },
                        {
                            offset: 1,
                            color: '#ff80ab'
                        }
                    ])
                },
                emphasis: {
                    focus: 'series'
                },
                data: newValue, // 数据值
            }
        })
        // console.log(monthProgressConfig)
        monthChartInstance.setOption(monthProgressConfig)
        // resizeChart()
    }  
    nextTick(() => {
        resizeChart()
    })
}

/**
 * 点击班组联动-展示各站点进度
 * @param $event 事件-获取系列值
 */
const getLocLinkageDatas = async ($event) => {
    // console.log($event)
    pg.value = $event.seriesName.substring(0, 10) // 班组
    let locParamsForm = reactive({
        jcYear: paramsForm.jcYear,
        pg: pg.value
    })
    let locProgressInfo = await axios.post('/index/jcdata/jcProgress/getJcProgressInfo/getLocLinkageInfo', { locParamsForm })
    // console.log(locProgressInfo)
    if (locProgressInfo.status) {
        //#region 
        /*
        // //百分比堆积条形图前置数据-嵌套数组
        // let locsData = [] // 存储不同线路分类数据
        // locProgressInfo.datas.locProgressRes.map(item => {
        //     let locdata = [item.FCX, item.NFCX] // 存储未完成、已完成，为同一数组 
        //     locsData.push(locdata)
        // })
        // console.log(locsData)
        // let totalData = []; //总数-用于堆叠百分比的分母
        // for (let i = 0; i < locsData[0].length; ++i) {
        //     let sum = 0;
        //     for (let j = 0; j < locsData.length; ++j) {
        //         sum += locsData[j][i];
        //     }
        //     totalData.push(sum);
        // }
        // console.log(totalData)
        */
       //#endregion
        // 各站点进度
        locProgressConfig.yAxis[0].data = locProgressInfo.datas.locProgressRes.map(item => item.LOCDESC)
        locProgressConfig.yAxis[1].data = locProgressInfo.datas.locProgressRes.map(item => item.CX)
        locProgressConfig.series = [{
                tooltip: {
                    formatter: (params) => {
                        return `${params.name.substr(7)}:已完成${params.data}%`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '已完成',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type: 'bar', // 图表类型为柱状图
                // barWidth: '20', // 柱子宽度，不设置则自适应
                stack: 'total',
                stackStrategy:'all',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series' // 鼠标悬浮
                },
                data: locProgressInfo.datas.locProgressRes.map(item => (item.FCX / item.CX *100).toFixed(2) ), // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'inside', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}%`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: 'rgba(3, 138, 255,.6)',
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType: 'solid', // 边框类型为实线
                    borderColor: 'rgba(3, 138, 255,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    // shadowBlur: 10, // 阴影模糊度
                    // shadowOffsetX: 5, // 阴影水平偏移
                    // shadowOffsetY: 5 // 阴影垂直偏移
                }
            },
            {
                tooltip: {
                    formatter: (params) => {
                        // console.log(params)
                        return `${params.name.substr(7)}:未完成${params.data}%`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '未完成',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type: 'bar', // 图表类型为柱状图
                // barWidth: '20', // 柱子宽度，不设置则自适应
                stack: 'total',
                stackStrategy:'all',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: locProgressInfo.datas.locProgressRes.map(item => (item.NFCX / item.CX*100).toFixed(2)), // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'inside', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}%`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: 'rgba(255, 252, 127,.6)',
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType: 'solid', // 边框类型为实线
                    borderColor: 'rgba(255, 252, 127,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    // shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    // shadowBlur: 10, // 阴影模糊度
                    // shadowOffsetX: 5, // 阴影水平偏移
                    // shadowOffsetY: 5 // 阴影垂直偏移
                }
            },{
                name: '总数',
                xAxisIndex: 1, // 第二个 X 轴
                yAxisIndex: 1, // 第二个 Y 轴
                type: 'bar', // 图表类型为柱状图
                // barWidth: '26', // 柱子宽度，不设置则自适应
                barGap: '-120%', // 柱子之间的间距
                showBackground: true, // 显示背景
                backgroundStyle: { // 背景样式
                    color: 'none', // 背景颜色
                    borderColor:'rgba(103, 242, 209,1)', // 边框颜色
                    borderWidth: 2, // 边框宽度
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType:'solid', // 边框类型为实线
                },
                // stack: 'total',
                stackStrategy:'all',
                emphasis: {
                    focus: 'series'
                },
                data: locProgressInfo.datas.locProgressRes.map(item => item.CX), // 数据值
                // label: { // 标签配置
                //     show: true, // 显示标签
                //     position: 'right', // 标签位置
                //     color: '#fff', // 标签颜色
                //     fontSize: 12, // 标签字体大小
                //     formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                //     // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                //     align: 'left' // 设置文本对齐方式为左对齐
                // },
                itemStyle: { // 柱子样
                    color: 'none',
                }
            }]
            // .map((name, sid) => {
            //     console.log(locsData[sid])
            //     return {
            //         name,
            //         xAxisIndex: 0,
            //         yAxisIndex: 0,
            //         type: 'bar',
            //         stack: 'total',
            //         barWidth: '60%',
            //         label: {
            //             show: true,
            //             formatter: (params) => Math.round(params.value * 1000) / 10 + '%',
            //             position: 'inside', // 标签位置
            //             // color: '#fff', // 标签颜色
            //             // fontSize: 12, // 标签字体大小
            //             // formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
            //         },
            //         data: locsData[sid].map((d, did) =>
            //             totalData[did] <= 0 ? 0 : d / totalData[did]
            //         )
            //     };
            // });
        /*locProgressConfig.series = [
            {
                tooltip: {
                    formatter: (params) => {
                        return `${params.name.substr(7)}:已完成${params.data}`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '已完成',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type: 'bar', // 图表类型为柱状图
                barWidth: '20', // 柱子宽度
                stack: 'total',
                stackStrategy:'all',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series' // 鼠标悬浮
                },
                data: locProgressInfo.datas.locProgressRes.map(item => item.FCX), // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'inside', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: 'rgba(3, 138, 255,.6)',
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType: 'solid', // 边框类型为实线
                    borderColor: 'rgba(3, 138, 255,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    // shadowBlur: 10, // 阴影模糊度
                    // shadowOffsetX: 5, // 阴影水平偏移
                    // shadowOffsetY: 5 // 阴影垂直偏移
                }
            },
            {
                tooltip: {
                    formatter: (params) => {
                        return `${params.name.substr(7)}:未完成${params.data}`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '未完成',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type: 'bar', // 图表类型为柱状图
                barWidth: '20', // 柱子宽度
                stack: 'total',
                stackStrategy:'all',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: locProgressInfo.datas.locProgressRes.map(item => item.NFCX), // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'inside', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: 'rgba(255, 252, 127,.6)',
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType: 'solid', // 边框类型为实线
                    borderColor: 'rgba(255, 252, 127,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    // shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    // shadowBlur: 10, // 阴影模糊度
                    // shadowOffsetX: 5, // 阴影水平偏移
                    // shadowOffsetY: 5 // 阴影垂直偏移
                }
            },
            {
                // tooltip: {
                //     formatter: (params) => {
                //         // console.log(params)
                //         return `${params.name.substr(7)}:完成率${params.data}%`
                //     }
                // }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '完成率',
                xAxisIndex: 1, // 第二个 X 轴
                yAxisIndex: 1, // 第二个 Y 轴
                type: 'bar', // 图表类型为柱状图
                barWidth: '26', // 柱子宽度
                barGap: '-120%', // 柱子之间的间距
                showBackground: true, // 显示背景
                backgroundStyle: { // 背景样式
                    color: 'none', // 背景颜色
                    borderColor:'rgba(103, 242, 209,1)', // 边框颜色
                    borderWidth: 2, // 边框宽度
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType:'solid', // 边框类型为实线
                },
                // stack: 'total',
                stackStrategy:'all',
                emphasis: {
                    focus: 'series'
                },
                data: locProgressInfo.datas.locProgressRes.map(item => item.WCL), // 数据值
                // label: { // 标签配置
                //     show: true, // 显示标签
                //     position: 'right', // 标签位置
                //     color: '#fff', // 标签颜色
                //     fontSize: 12, // 标签字体大小
                //     formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                //     // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                //     align: 'left' // 设置文本对齐方式为左对齐
                // },
                itemStyle: { // 柱子样
                    color: 'none',
                    // borderRadius: [3, 3, 3, 3], // 圆
                    // borderType:'solid', // 边框类型为实线
                    // borderColor: 'rgba(103, 242, 209,1)', // 边框颜色
                    // borderWidth: 2, // 边框宽度
                    // shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    // shadowBlur: 10, // 阴影模糊度
                    // shadowOffsetX: 5, // 阴影水平偏移
                    // shadowOffsetY: 5 // 阴影垂直偏移
                }
            }
        ]*/
        /*locProgressInfo.datas.locProgressRes.map(item => {
            return {
                tooltip: {
                    formatter: (params) => {
                        return `${params.seriesName.substr(7)}:已完成${params.data}`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '已完成',
                type: 'bar', // 图表类型为柱状图
                barWidth: '20', // 柱子宽度
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [item.FCX], // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'left', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: {
                        type: 'linear', // 线性渐变
                        x: 1, // 渐变的起始点 x 坐标
                        y: 1, // 渐变的起始点 y 坐标
                        x2: 0, // 渐变的结束点 x 坐标   
                        y2: 0, // 渐变的结束点 y 坐标
                        colorStops: [ // 渐变的颜色
                            { offset: 0, color: 'rgba(3, 138, 255,1)' }, // 起始颜色
                            { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                        ],
                    },
                    borderRadius: [0, 3, 3, 0], // 圆
                }
            },
            {
                tooltip: {
                    formatter: (params) => {
                        return `${params.seriesName.substr(7)}:未完成${params.data}`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '未完成',
                type: 'bar', // 图表类型为柱状图
                barWidth: '20', // 柱子宽度
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [item.NFCX], // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'left', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: {
                        type: 'linear', // 线性渐变
                        x: 1, // 渐变的起始点 x 坐标
                        y: 1, // 渐变的起始点 y 坐标
                        x2: 0, // 渐变的结束点 x 坐标   
                        y2: 0, // 渐变的结束点 y 坐标
                        colorStops: [ // 渐变的颜色
                            { offset: 0, color: 'rgba(3, 138, 255,1)' }, // 起始颜色
                            { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                        ],
                    },
                    borderRadius: [0, 3, 3, 0], // 圆
                }
            },
            {
                tooltip: {
                    formatter: (params) => {
                        return `${params.seriesName.substr(7)}:完成率${params.data}%`
                    }
                }, // 提示框配置
                // name: item.PGNAME.substr(11), // 系列名称
                name: '完成率',
                type: 'bar', // 图表类型为柱状图
                barWidth: '20', // 柱子宽度
                stack: 'total',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: [item.WCL], // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'left', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: {
                        type: 'linear', // 线性渐变
                        x: 1, // 渐变的起始点 x 坐标
                        y: 1, // 渐变的起始点 y 坐标
                        x2: 0, // 渐变的结束点 x 坐标   
                        y2: 0, // 渐变的结束点 y 坐标
                        colorStops: [ // 渐变的颜色
                            { offset: 0, color: 'rgba(3, 138, 255,1)' }, // 起始颜色
                            { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                        ],
                    },
                    borderRadius: [0, 3, 3, 0], // 圆
                }
            }
        })*/
        // console.log(locProgressConfig)
        locChartInstance.setOption(locProgressConfig)
    }
}


/**
 * 点击站点联动-展示子系统进度
 * @param $event 事件-获取系列值
 */
const getSubLinkageDatas = async ($event) => {
    // console.log($event)
    station.value = $event.name.substring(0, 6) // 站点
    let subParamsForm = reactive({
        jcYear: paramsForm.jcYear,
        station: station.value
    })
    let subProgressInfo = await axios.post('/index/jcdata/jcProgress/getJcProgressInfo/getSubLinkageInfo', { subParamsForm })
    // console.log(subProgressInfo)
    if (subProgressInfo.status) {
        // 各站点进度
        subProgressConfig.yAxis[0].data = subProgressInfo.datas.subProgressRes.map(item => item.SUBDESC)
        subProgressConfig.yAxis[1].data = subProgressInfo.datas.subProgressRes.map(item => item.CX)
        subProgressConfig.series = [
            {
                tooltip: {
                    formatter: (params) => {
                        return `${params.name.substr(7)}:已完成${params.data}%`
                    }
                }, // 提示框配置
                name: '已完成',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type: 'bar', // 图表类型为柱状图
                // barWidth: '15', // 柱子宽度，不设置则自适应
                stack: 'total',
                stackStrategy:'all',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series' // 鼠标悬浮
                },
                data: subProgressInfo.datas.subProgressRes.map(item => (item.FCX / item.CX *100).toFixed(2))  , // 数据值)
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'inside', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}%`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: 'rgba(3, 138, 255,.6)',
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType: 'solid', // 边框类型为实线
                    borderColor: 'rgba(3, 138, 255,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                }
            },
            {
                tooltip: {
                    formatter: (params) => {
                        return `${params.name.substr(7)}:未完成${params.data}%`
                    }
                }, // 提示框配置
                name: '未完成',
                xAxisIndex: 0,
                yAxisIndex: 0,
                type: 'bar', // 图表类型为柱状图
                // barWidth: '15', // 柱子宽度，不设置则自适应
                stack: 'total',
                stackStrategy:'all',
                label: {
                    show: true
                },
                emphasis: {
                    focus: 'series'
                },
                data: subProgressInfo.datas.subProgressRes.map(item => (item.NFCX / item.CX *100).toFixed(2)), // 数据值
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'inside', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}%`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                    // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                    align: 'left' // 设置文本对齐方式为左对齐
                },
                itemStyle: { // 柱子样
                    color: 'rgba(255, 252, 127,.6)',
                    borderRadius: [0, 3, 3, 0], // 圆
                    borderType: 'solid', // 边框类型为实线
                    borderColor: 'rgba(255, 252, 127,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    shadowBlur: 10, // 阴影模糊度
                    shadowOffsetX: 5, // 阴影水平偏移
                    shadowOffsetY: 5 // 阴影垂直偏移
                }
            },
            {
                name: '总数',
                xAxisIndex: 1, // 第二个 X 轴
                yAxisIndex: 1, // 第二个 Y 轴
                type: 'bar', // 图表类型为柱状图
                // barWidth: '17', // 柱子宽度，不设置则自适应
                barGap: '-120%', // 柱子之间的间距
                showBackground: true, // 显示背景
                backgroundStyle: { // 背景样式
                    color: 'none', // 背景颜色
                    borderColor:'rgba(103, 242, 209,1)', // 边框颜色
                    borderWidth: 2, // 边框宽度
                    borderRadius: [3, 3, 3, 3], // 圆
                    borderType:'solid', // 边框类型为实线
                },
                // stack: 'total',
                stackStrategy:'all',
                emphasis: {
                    focus: 'series'
                },
                data: subProgressInfo.datas.subProgressRes.map(item => item.CX), // 数据值
                // label: { // 标签配置
                //     show: true, // 显示标签
                //     position: 'right', // 标签位置
                //     color: '#fff', // 标签颜色
                //     fontSize: 12, // 标签字体大小
                //     formatter: `{c}`, // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                //     // formatter: (params) => `${params.seriesName.substr(7)}:${params.data}`, 
                //     align: 'left' // 设置文本对齐方式为左对齐
                // },
                itemStyle: { // 柱子样
                    color: 'none',
                }
            }
        ]
        // console.log(subProgressConfig)
        subChartInstance.setOption(subProgressConfig)
    }
}

/**
 * 点击子系统-展示子系统检测列表
 * @param $event 事件-获取系列值
 */
const getSubList = async ($event) => {
    // console.log($event)
    sub.value = $event.name.substring(0, 6) // 站点
    let subListParamsForm = reactive({
        jcYear: paramsForm.jcYear,
        station: station.value,
        sub: sub.value
    })
    let subListInfo = await axios.post('/index/jcdata/jcProgress/getJcProgressInfo/getSubList', { subListParamsForm })
    // console.log(subListInfo)
    if (subListInfo.status) {
        // 各站点进度
        subDateConfig.xAxis.data = subListInfo.datas.subListRes.map(item => item.FINISHDATE)
        subDateConfig.series = [
            //顶部菱形
            {
                type: 'pictorialBar', // 类型为象形柱
                symbol: 'diamond', // 图形为菱形
                symbolPosition: 'end', // 图形位置
                symbolSize: [31, 10], // 图形大小
                symbolOffset: [-1, '-60%'], // 图形偏移
                // symbolRotate: 90, // 图形旋转角度
                itemStyle: { // 图形样式
                    color: 'rgba(41,121,255,1)', // 颜色
                    borderColor: 'rgba(3, 138, 255,1)', // 边框颜色
                    borderWidth: 1, // 边框宽度
                    shadowColor: 'rgba(241, 239, 233, 0.8)', // 阴影颜色
                    shadowBlur: 15, // 阴影模糊度
                    shadowOffsetX: 2, // 阴影水平偏移
                    shadowOffsetY: -5 // 阴影垂直偏移
                },
                label: { // 标签配置
                    show: true, // 显示标签
                    position: 'top', // 标签位置
                    color: '#fff', // 标签颜色
                    fontSize: 12, // 标签字体大小
                    formatter: `{c}` // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                },
                zlevel: 10, // 图形层级
                // barWidth: '20', // 柱子宽度
                barGap: 0, // 柱子之间的间距
                data: subListInfo.datas.subListRes.map(item2 => item2.CX), // 数据值
            },
            //左边
            {
                // name: , // 系列名称
                type: 'bar', // 图表类型为柱状图
                barWidth: '13', // 柱子宽度
                barGap: '0%', // 柱子之间的间距
                data: subListInfo.datas.subListRes.map(item2 => item2.CX), // 数据值
                // label: { // 标签配置
                //     show: true, // 显示标签
                //     position: 'top', // 标签位置
                //     color: '#fff', // 标签颜色
                //     fontSize: 12, // 标签字体大小
                //     formatter: `{c}` // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                // },
                itemStyle: { // 柱子样式                    
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0, // 渐变的起始点 x 坐标
                        y: 0, // 渐变的起始点 y 坐标
                        x2: 0, // 渐变的结束点 x 坐标
                        y2: 1, // 渐变的结束点 y 坐标
                        colorStops: [ // 渐变的颜色
                            { offset: 0, color: 'rgba(3, 138, 255,.5)' }, // 起始颜色
                            { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                        ],
                    },
                    // borderRadius: [3, 3, 0, 0], // 圆角                    
                }
            },
            //右边
            {
                // name: , // 系列名称
                type: 'bar', // 图表类型为柱状图
                barWidth: '19', // 柱子宽度
                barGap: '0%', // 柱子之间的间距
                data: subListInfo.datas.subListRes.map(item2 => item2.CX), // 数据值
                // label: { // 标签配置
                //     show: true, // 显示标签
                //     position: 'top', // 标签位置
                //     color: '#fff', // 标签颜色
                //     fontSize: 12, // 标签字体大小
                //     formatter: `{c}` // 标签内容格式{a}：系列名。{b}：数据名。{c}：数据值
                // },
                itemStyle: { // 柱子样式                    
                    color: {
                        type: 'linear', // 线性渐变
                        x: 0, // 渐变的起始点 x 坐标
                        y: 0, // 渐变的起始点 y 坐标
                        x2: 0, // 渐变的结束点 x 坐标
                        y2: 1, // 渐变的结束点 y 坐标
                        colorStops: [ // 渐变的颜色
                            { offset: 0, color: 'rgba(3, 138, 255,1)' }, // 起始颜色
                            { offset: 1, color: 'rgba(147, 250, 165,0)' } // 结束颜色
                        ],
                    },
                    // borderRadius: [3, 3, 0, 0], // 圆角                    
                }
            },
        ]
        // console.log(subDateConfig)
        subDateChartInstance.setOption(subDateConfig)
    }
}

// 组件挂载后执行初始化
onMounted(() => {
    initChartOfLineProgress()
    // 监听窗口大小变化事件以支持响应式
    window.addEventListener('resize', resizeChart)
    // 监听点击事件-通过@CLICK方式无法获取系列值
    PgChartInstance.on('click', getLocLinkageDatas)
    locChartInstance.on('click', getSubLinkageDatas)
    subChartInstance.on('click', getSubList)

})

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
    window.removeEventListener('resize', resizeChart)
    lineChartInstance?.dispose() // 销毁 echarts 实例
    PgChartInstance?.dispose() // 销毁 echarts 实例
    monthChartInstance?.dispose() // 销毁 echarts 实例
    locChartInstance?.dispose() // 销毁 echarts 实例
    subChartInstance?.dispose() // 销毁 echarts 实例
    subDateChartInstance?.dispose() // 销毁 echarts 实例
})


</script>

<style lang="less" scoped>
.progress-box {
    width: 100%;
    height: 100%;
    position: relative;

    .loading {
        // width: 100%;
        // height: 100%;
        position: absolute;
        top: 40%;
        left: 40%;
        z-index: 10;
    }

    .params-box {
        // background-color: aqua;
        width: 100%;
        height: 5%;
        border-bottom: 1px solid #dcdfe6;
        padding: .3125rem;

        .el-form {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;

            .el-form-item {
                margin-bottom: 0;
                margin-right: .3125rem;
            }
        }
    }

    .frm-box {
        width: 100%;
        height: 95%;
        // padding: .625rem;
        // background-image: url('../../../../public/img/qwdeqw.png');
        background-image: url('../../../assets/img/qwdeqw.png');
        background-size: 100% 100%;
        display: flex;
        position: relative;

        .left-box {
            width: 70%;
            height: 100%;

            .left-up-box {
                width: 100%;
                height: 33%;
                // background-color: rgba(255, 255, 255,.5);
                display: flex;

                .left-up-box-one {
                    width: 33%;
                    height: 100%;
                    // background-color: rgba(134, 98, 98, 0.5);
                    // background-image:url('../../../../public/img/aaa1.png');
                    background-image: url('../../../assets/img/aaa1.png');
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .charts {
                        width: 70%;
                        height: 70%;
                        color: #12d3d3;
                    }
                }

                .left-up-box-two {
                    width: 33%;
                    height: 100%;
                    background-image: url('../../../assets/img/aaa1.png');
                    background-size: 100% 100%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .left-up-box-three {
                    width: 33%;
                    height: 100%;

                    .charts {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .left-middle-box {
                width: 100%;
                height: 33%;
                // background-color: rgba(134, 98, 98, 0.5);
            }

            .left-down-box {
                width: 100%;
                height: 33%;
            }
        }

        .right-box {
            width: 30%;
            height: 100%;

            // background-color: rgba(134, 98, 98, 0.5);
            .right-up-box {
                width: 100%;
                height: 38%;

                // background-color: rgba(134, 98, 98, 0.5);
                .charts {
                    width: 100%;
                    height: 100%;
                }
            }

            .right-down-box {
                width: 100%;
                height: 62%;

                // background-color: rgba(68, 62, 62, 0.5);
                .charts {
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
</style>